微信小程序实战之天气预报-白红宇

强烈建议你试试无所不能的chatGPT，快点击我

微信小程序实战之天气预报

阅读量：4084 次

发布时间：2019-05-25

本文共 10557 字，大约阅读时间需要 35 分钟。

 版权声明：本文为博主原创文章，未经博主允许不得转载。

目录

这里写图片描述

这个案例是仿UC中天气界面做的中间也有点出入，预留了显示当前城市名字和刷新图标的位置，自己可以写下，也可以添加搜索城市。值得注意的是100%这个设置好像已经不好使了，可以通过获取设备的高度通过数据绑定设置高度。地址：

界面主要分为四部分：

这里写图片描述

第一部分

这里写图片描述

这里是预留的一块可以自行添加补充下

第二部分：

这里写图片描述


         
          
             
       
        {
     {
     currentTemperature}}
             
             
           
          
            
             
                
        
         {
     {
     nightAirTemperature}}
                
                
        
         /
                
                
        
         {
     {
     dayAirTemperature}}
                
                
                
                
        
         {
     {
     weather}}
              
           
        
        
   
    1 
    2 
    3 
    4 
    5 
    6 
    7 
    8 
    9 
    10 
    11 
    12 
    13 
    14 
    15 
    16 
    17 
    18 
    19 
    20 
    21 
    22 
      
   
    1 
    2 
    3 
    4 
    5 
    6 
    7 
    8 
    9 
    10 
    11 
    12 
    13 
    14 
    15 
    16 
    17 
    18 
    19 
    20 
    21 
    22

第三部分：

这里写图片描述


       
         
            
             
             
             
       
        {
     {
     aqi}}
             
             
       
        {
     {
     quality}}
           
          
            
             
       
        {
     {
     windPower}}
             
             
       
        {
     {
     windDirection}}
           
        
        
   
    1 
    2 
    3 
    4 
    5 
    6 
    7 
    8 
    9 
    10 
    11 
    12 
    13 
    14 
    15 
    16 
    17 
      
   
    1 
    2 
    3 
    4 
    5 
    6 
    7 
    8 
    9 
    10 
    11 
    12 
    13 
    14 
    15 
    16 
    17

第四部分：

这里写图片描述


       
       
          
            
               
                
        
         星期一
                
        
         星期二
                
        
         星期三
                
        
         星期四
                
        
         星期五
                
        
         星期六
                
        
         星期日
                
                  
         
          {
     {
     item.night_air_temperature}}
                   
                   
         
          /
                    
         
          {
     {
     item.day_air_temperature}}
                   
                   
                 
              
          
   
    1 
    2 
    3 
    4 
    5 
    6 
    7 
    8 
    9 
    10 
    11 
    12 
    13 
    14 
    15 
    16 
    17 
    18 
    19 
    20 
    21 
    22 
      
   
    1 
    2 
    3 
    4 
    5 
    6 
    7 
    8 
    9 
    10 
    11 
    12 
    13 
    14 
    15 
    16 
    17 
    18 
    19 
    20 
    21 
    22

js

//index.js//获取应用实例var app = getApp()Page({  data: {    //加载状态    loadingHidden: false,    //当前温度    currentTemperature: '',    //夜间温度    nightAirTemperature: '',    //白天温度    dayAirTemperature: '',    //当前天气    weather: '',    //污染指数    aqi: '',    //污染程度    quality: '',    //风力    windPower: '',    //风向    windDirection: '',    //因为数据返回不是数组所以要自己封装一个数组    list: [],    height: 0,  },  onLoad: function () {    console.log('onLoad')    var that = this    //100%好像不好使 可以获取设备高度    wx.getSystemInfo({      success: function (res) {        that.data.height = res.windowHeight;      }    })    wx.getLocation({      success: function (res) {        //通过经纬度请求数据        wx.request({          //这个网站有免费API赶紧收藏          url: 'http://route.showapi.com/9-5',          data: {            showapi_appid: '11697',            showapi_sign: '6c0c15c5ec61454dac5288cea2d32881',            //            from: '5',            lng: res.longitude,            lat: res.latitude,            //获取一周情况 0是不获取            needMoreDay: '1',            needIndex: '1'          },          success: function (res) {            console.log(res)            console.log(res.data.showapi_res_body.now.api)            that.setData({              //改变加载状态              loadingHidden: true,              currentTemperature: res.data.showapi_res_body.now.temperature,              nightAirTemperature: res.data.showapi_res_body.f1.night_air_temperature,              dayAirTemperature: res.data.showapi_res_body.f1.day_air_temperature,              weather: res.data.showapi_res_body.now.weather,              aqi: res.data.showapi_res_body.now.aqi,              quality: res.data.showapi_res_body.now.aqiDetail.quality,              windPower: res.data.showapi_res_body.now.wind_power,              windDirection: res.data.showapi_res_body.now.wind_direction,              //拼接数组              list: [                {                  'day_weather_pic': res.data.showapi_res_body.f1.day_weather_pic,                  'weekday': res.data.showapi_res_body.f1.weekday,                  'day_air_temperature': res.data.showapi_res_body.f1.day_air_temperature,                  'night_air_temperature': res.data.showapi_res_body.f1.night_air_temperature                },                {                  'day_weather_pic': res.data.showapi_res_body.f2.day_weather_pic,                  'weekday': res.data.showapi_res_body.f2.weekday,                  'day_air_temperature': res.data.showapi_res_body.f2.day_air_temperature,                  'night_air_temperature': res.data.showapi_res_body.f2.night_air_temperature                },                {                  'day_weather_pic': res.data.showapi_res_body.f3.day_weather_pic,                  'weekday': res.data.showapi_res_body.f3.weekday,                  'day_air_temperature': res.data.showapi_res_body.f3.day_air_temperature,                  'night_air_temperature': res.data.showapi_res_body.f3.night_air_temperature                },                {                  'day_weather_pic': res.data.showapi_res_body.f4.day_weather_pic,                  'weekday': res.data.showapi_res_body.f4.weekday,                  'day_air_temperature': res.data.showapi_res_body.f4.day_air_temperature,                  'night_air_temperature': res.data.showapi_res_body.f4.night_air_temperature                },                {                  'day_weather_pic': res.data.showapi_res_body.f5.day_weather_pic,                  'weekday': res.data.showapi_res_body.f5.weekday,                  'day_air_temperature': res.data.showapi_res_body.f5.day_air_temperature,                  'night_air_temperature': res.data.showapi_res_body.f5.night_air_temperature                },                {                  'day_weather_pic': res.data.showapi_res_body.f6.day_weather_pic,                  'weekday': res.data.showapi_res_body.f6.weekday,                  'day_air_temperature': res.data.showapi_res_body.f6.day_air_temperature,                  'night_air_temperature': res.data.showapi_res_body.f6.night_air_temperature                },                {                  'day_weather_pic': res.data.showapi_res_body.f7.day_weather_pic,                  'weekday': res.data.showapi_res_body.f7.weekday,                  'day_air_temperature': res.data.showapi_res_body.f7.day_air_temperature,                  'night_air_temperature': res.data.showapi_res_body.f7.night_air_temperature                }              ]            })          }        })      }    })  }})   
   
    1 
    2 
    3 
    4 
    5 
    6 
    7 
    8 
    9 
    10 
    11 
    12 
    13 
    14 
    15 
    16 
    17 
    18 
    19 
    20 
    21 
    22 
    23 
    24 
    25 
    26 
    27 
    28 
    29 
    30 
    31 
    32 
    33 
    34 
    35 
    36 
    37 
    38 
    39 
    40 
    41 
    42 
    43 
    44 
    45 
    46 
    47 
    48 
    49 
    50 
    51 
    52 
    53 
    54 
    55 
    56 
    57 
    58 
    59 
    60 
    61 
    62 
    63 
    64 
    65 
    66 
    67 
    68 
    69 
    70 
    71 
    72 
    73 
    74 
    75 
    76 
    77 
    78 
    79 
    80 
    81 
    82 
    83 
    84 
    85 
    86 
    87 
    88 
    89 
    90 
    91 
    92 
    93 
    94 
    95 
    96 
    97 
    98 
    99 
    100 
    101 
    102 
    103 
    104 
    105 
    106 
    107 
    108 
    109 
    110 
    111 
    112 
    113 
    114 
    115 
    116 
    117 
    118 
    119 
    120 
    121 
    122 
    123 
    124 
    125 
    126 
    127 
    128 
    129 
      
   
    1 
    2 
    3 
    4 
    5 
    6 
    7 
    8 
    9 
    10 
    11 
    12 
    13 
    14 
    15 
    16 
    17 
    18 
    19 
    20 
    21 
    22 
    23 
    24 
    25 
    26 
    27 
    28 
    29 
    30 
    31 
    32 
    33 
    34 
    35 
    36 
    37 
    38 
    39 
    40 
    41 
    42 
    43 
    44 
    45 
    46 
    47 
    48 
    49 
    50 
    51 
    52 
    53 
    54 
    55 
    56 
    57 
    58 
    59 
    60 
    61 
    62 
    63 
    64 
    65 
    66 
    67 
    68 
    69 
    70 
    71 
    72 
    73 
    74 
    75 
    76 
    77 
    78 
    79 
    80 
    81 
    82 
    83 
    84 
    85 
    86 
    87 
    88 
    89 
    90 
    91 
    92 
    93 
    94 
    95 
    96 
    97 
    98 
    99 
    100 
    101 
    102 
    103 
    104 
    105 
    106 
    107 
    108 
    109 
    110 
    111 
    112 
    113 
    114 
    115 
    116 
    117 
    118 
    119 
    120 
    121 
    122 
    123 
    124 
    125 
    126 
    127 
    128 
    129

wxss

.container {  display: flex;  flex-direction: column;  justify-content: space-between;}.newTopView {  display: flex;  flex-direction: row;  justify-content: space-between;}/*  头部样式上半部分*/.topView {  flex-direction: column;  align-self: center;  margin-top: -450rpx;}/*当前度数样式*/.degreeView {  flex-direction: row;  position: relative;}/*当前温度度数图标*/.circle {  width: 35rpx;  height: 35rpx;    position: absolute;  left: 130rpx;} /*当前度数数组*/.degree {  color: white;  font-size: 130rpx}/*详细View样式*/.detailInfoView {  flex-direction: row;}/*当前最高和最低温度度数图标*/.detailInfoCircle {  width: 20rpx;  height: 20rpx;    position: absolute;  left: 30rpx;} /*当前度数数组*/.detailInfoDegree {  color: white;  font-size: 30rpx}/*斜线*/.detailInfoLine {  color: white;  margin-left: 15rpx;  font-size: 30rpx;}/*比如阴天 晴天，暴雨*/.detailInfoName {  font-size: 30rpx;  color: white;  margin-left: 20rpx;  align-self: center}/*中间view样式*/.centerView {  display: flex;  flex-direction: row;  margin-top: -550rpx;  justify-content: center;  align-items: center;}/*中间view分为两个view*/.centerItem {  display: flex;  flex-direction: row;  align-items: center;  justify-content: center;}/*Item中图片样式*/.centerItemImage {  width: 25rpx;  height: 25rpx;}/*文字样式*/.centerItemText {  font-size: 28rpx;  color: white;}/*底部view样式*/.bottomView {  margin-top: -200rpx;  display: flex;  flex-direction: row;  justify-content: space-around;  align-items: center;}.bottomItemView {  display: flex;  flex-direction: column;  align-items: center;  margin-bottom: 200rpx;}/*最近七天样式*/.bottomImage {  width: 70rpx;  height: 70rpx;}.bottomText {  font-size: 28rpx;  color: white;}

你可能感兴趣的文章

国内有个码云，gitee

原来我之前一直用的APM固件....现在很多东西明白了。

realsense-ros里里程计相关代码

似乎写个ROS功能包并不难，你会订阅话题发布话题，加点逻辑处理，就可以写一些基础的ROS功能包了。

if __name__ == ‘__main__‘:就是Python里的main函数，脚本从这里开始执行，如果没有main函数则从上到下顺序执行。

PX4官方用户和开发手册的首页面是会给你选择英文和中文的

网络协议栈我是不是可以这么理解，就是把你要发送的数据自动处理成TCPIP格式的消息发出去，这种底层的转换不需要你弄了。

除了LwIP还有uIP

《跟工程师学嵌入式开发》这本书最后的终极项目我反而觉得有说头

博士的申请考核制

那些硬件的初始化函数主要是在做些上什么？

MAVLink学习之路05_MAVLink应用编程接口分析（也有讲STM32下的收发函数）

找到了中文版的mavlink手册

浅谈飞控开发的仿真功能

我觉得在室内弄无人机开发装个防撞机架还是很有必要的，TBUS就做得很好。

serial也是见到很多次了，似乎它就是一种串行通信协议

TBUS的一些信息

PX4+激光雷达在gazebo中仿真实现（古月居）

专业和业余的区别就在于你在基础在基本功打磨练习花的时间

通过mavlink实现自主航线的过程笔记

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！-- 愿君每日到此一游！

当前时间: 2024-09-20 12:28:22 当前IP: 18.220.187.80 联系邮箱:javaeecc@qq.com Copyright © 2020 - 2022 baihongyu.com 京ICP备2021015314号-2

强烈建议你试试无所不能的CHAT-GPT，快点击我

强烈建议你试试无所不能的CHAT-GPT，快点击我